<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <style>
        html,
        body,
        #diagram {
            height: 100%
        }

        .highlight:not(.djs-connection) .djs-visual> :nth-child(1) {
            fill: green !important;
            /* color elements as green */
        }

        .highlight-overlay {
            background-color: green;
            /* color elements as green */
            opacity: 0.4;
            pointer-events: none;
            /* no pointer events, allows clicking through onto the element */
            border-radius: 10px;
        }
    </style>

    <!--
    this is an example of how to add colors to your BPMN diagram using bpmn-js
  -->

    <title>bpmn-js Mini example - bpmn-js-examples</title>
</head>

<body>

    <h1>bpmn-js Mini</h1>

    <div id="diagram"></div>

    <!-- required modeler styles -->
    <link rel="stylesheet" href="./dist/assets/diagram-js.css">
    <link rel="stylesheet" href="./dist/assets/bpmn-font/css/bpmn.css">

    <!-- modeler distro -->
    <script src="./dist/bpmn-modeler.development.js"></script>

    <!-- jquery (required for example only) -->
    <script src="./jquery.js"></script>

    <!-- app -->
    <script>
        var viewer = new BpmnJS({
            container: '#diagram'
        });

        var isRead = true;

        async function showDiagram(diagramXML) {

            await viewer.importXML(diagramXML);

            var overlays = viewer.get('overlays'),
                canvas = viewer.get('canvas'),
                elementRegistry = viewer.get('elementRegistry'),
                modeling = viewer.get('modeling');

            // Option 1: Color via Overlay
            var shape = elementRegistry.get('CalmCustomerTask');

            var $overlayHtml = $('<div class="highlight-overlay">')
                .css({
                    width: shape.width,
                    height: shape.height
                });

            overlays.add('CalmCustomerTask', {
                position: {
                    top: 0,
                    left: 0
                },
                html: $overlayHtml
            });

            // Option 2: Color via BPMN 2.0 Extension
            var elementToColor = elementRegistry.get('SelectAPizzaTask');

            modeling.setColor([elementToColor], {
                stroke: 'green',
                fill: 'rgba(0, 80, 0, 0.4)'
            });

            // Option 3: Color via Marker + CSS Styling
            canvas.addMarker('OrderReceivedEvent', 'highlight');

            if (isRead) $(".djs-palette").hide();

            // 取消菜单弹出
            viewer.on('contextPad.create', (event) => {
                if (isRead) {
                    event.pad.htmlContainer.remove();
                    return false;
                }
            });

            // 取消线推拽
            viewer.on('connectionSegment.move.out', (event) => {
                if (isRead) return false;
            });

            // 取消操作点推拽
            viewer.on('drag.start', (event) => {
                if (isRead) return false;
            });

            viewer.on('directEditing.activate', (event) => {
                if (isRead) {
                    $(".djs-direct-editing-parent").remove();
                    $(".djs-label-hidden").removeClass('djs-label-hidden');
                    $(".djs-element-hidden").removeClass('djs-element-hidden');
                    return !isRead;
                }
            });
        }

        // load + show diagram
        $.get('https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/master/colors/resources/pizza-collaboration.bpmn',
            showDiagram, 'text');
    </script>
</body>

</html>